<script>
import AnalysisVideo from "../../analysisVideo.vue"
import { getShowImage, valIsEmpty } from "@/utils"
import common from "../../common"
import scoreIcon from "./assets/score.svg"
import userScore from "../../userScore.vue"

export default {
  name: "analysis",
  methods: { valIsEmpty, getShowImage },
  components: { AnalysisVideo, userScore },
  inject: ["root", "parent"],
  props: {
    questionItem: Object,
  },
  data() {
    return {
      isVip: false,
      common,
      scoreIcon,
    }
  },
  created() {
    this.isVip = this.root.isVip
    console.log(this.questionItem, "this.questionItem")
  },
  emits: ["getDetails"],
}
</script>

<template>
  <view class="component">
    <!--		题目翻译-->
    <view class="trans">{{ questionItem.topic.trans }}</view>
    <!--		自评分按钮-->
    <!--		只有用户作答了才展示-->
    <userScore
      v-if="questionItem.topic && questionItem.topic.userDoTopicId && (questionItem.topic.userAnswer || questionItem.topic.userAnswerImage)"
      ref="userScore"
      @submit="() => $emit('getDetails')"
      :score-prop="questionItem.topic.userScore"
      :max-score="questionItem.topic.questionScore"
      :user-do-topic-id="questionItem.topic.userDoTopicId"
			:showTipPopupProp="false"
    >
      <view class="user-score-btn">
        <image class="icon" :src="scoreIcon"></image>
        <text>自评分</text>
        <text v-if="!valIsEmpty(questionItem.topic.userScore)">：{{ questionItem.topic.userScore }}</text>
      </view>
    </userScore>
    <!--				用户作答-->
    <view class="user-answer-text block" v-if="questionItem.topic.userAnswer">
      <text>{{ questionItem.topic.userAnswer }}</text>
    </view>
    <image
      v-if="questionItem.topic.userAnswerImage"
      class="user-answer-image block"
      @click="
        () =>
          $uni.previewImage({
            urls: [getShowImage(questionItem.topic.userAnswerImage)],
          })
      "
      mode="aspectFill"
      :src="getShowImage(questionItem.topic.userAnswerImage)"
    ></image>
    <!--				题目解析和视频讲解-->
    <template v-if="isVip">
      <view v-html="questionItem.topic.analysis" v-if="questionItem.topic.analysis" class="analysis block"></view>
      <view class="block">
        <analysis-video v-if="questionItem.topic.videoUrl" :video-file-url="getShowImage(questionItem.topic.videoUrl)"></analysis-video>
      </view>
    </template>
    <view v-else class="btn-container">
      <view class="btn" @click="() => root.checkIsVip()">查看解析</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  margin-top: 30rpx;
  .trans {
    color: var(--text-color-light);
    font-size: calc(30rpx * var(--font-size-rate));
  }
  .user-score-btn {
    margin: 20rpx 0;
    padding: 10rpx 30rpx;
    background: var(--theme-color);
    font-size: 30rpx;
    display: flex;
    align-items: center;
    color: white;
    width: max-content;
    border-radius: 35rpx;
    > .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }
  .block {
    margin-top: 20rpx;
  }
  .user-answer-text {
    background: #f5f5f5;
    padding: 20rpx;
    border-radius: 20rpx;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    > text {
    }
  }
  .user-answer-image {
    width: 160rpx;
    height: 160rpx;
  }
  .user-answer {
    font-weight: bold;
  }

  .btn-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10rpx;

    .btn {
      padding: 0 30rpx;
      height: 60rpx;
      border-radius: 30rpx;
      background: var(--theme-color);
      display: flex;
      align-items: center;
      color: white;
    }
  }

  .analysis {
    color: var(--text-color-theme);
  }
}
</style>
